import React from 'react';
import StreamDataRenderer from './StreamDataRenderer';

const MessageItem = ({ message, onItemHover, onItemLeave }) => {
    return (
        <div className={`message ${message.type}`}>
            {message.type === 'user' ? (
                <>
                    <div className="user-avatar">
                        <span className="material-icons">person</span>
                    </div>
                    <div className="user-message">{message.content}</div>
                </>
            ) : (
                <>
                    <div className="bot-avatar">
                        <img src="/assets/logo/u5.png" alt="AI Assistant" />
                    </div>
                    <div className="bot-message">
                        {message.streamData && message.streamData.length > 0 ? (
                            <StreamDataRenderer
                                data={message.streamData}
                                onItemHover={onItemHover}
                                onItemLeave={onItemLeave}
                            />
                        ) : message.content ? (
                            <div className="welcome-content">
                                {message.content}
                            </div>
                        ) : message.originalContent ? (
                            <div className="bot-content">
                                <pre>{JSON.stringify(message.originalContent, null, 2)}</pre>
                            </div>
                        ) : (
                            <div className="bot-content">
                                <span style={{color: '#999'}}>暂无内容</span>
                            </div>
                        )}
                    </div>
                </>
            )}
        </div>
    );
};

export default MessageItem;